<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>信息提交</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/element-ui@2.15.14.css" />
    <link rel="stylesheet" href="./css/vant@2.12.54.css" />
    <link rel="stylesheet" href="./css/submit.css" />
    <style>
      #app {
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      .el-date-editor .el-icon-date {
  display: none;
}
.van-cell{
  padding-left: 5px;
}
    </style>
  </head>

  <body>
    <div id="app">
      <div class="logo">
        <img src="./img/Logo_1.png" alt="" />
      </div>
      <div class="inp">
        <p>
          <span class="iconfont icon-yonghu1"></span>
          信息填写
        </p>
        <div>
          <span>姓名：</span>
          <input type="text" placeholder="" v-model="name" />
        </div>
        <div>
          <span>电话：</span>
          <input type="text" placeholder="" v-model="phone" />
        </div>
        
        <div>
          <span>地区：</span>
          <el-select v-model="value_1" placeholder="省份" @change="select_1">
            <el-option
              v-for="item in options_1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="value_2" placeholder="市区" @change="select_2">
            <el-option
              v-for="item in options_2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="value_3" placeholder="县区" @change="select_3">
            <el-option
              v-for="item in options_3"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>地址：</span>
          <input type="text" placeholder="" v-model="detail" />
        </div>
        <div>
          <span>到货日期：</span>
          <!-- <input type="date" name="" id="" v-model="date"> -->
        <!-- <el-date-picker type="date" placeholder="选择日期" v-model="date" style="width: 100%; height: 100%;" @change="handleDateChange"></el-date-picker> -->
        <van-cell :value="date" @click="show = true">
          <template style="position: absolute; left: 0;">
            <span v-if="!date" class="placeholder">请选择日期</span>
          </template>
        </van-cell>
       
        </el-form>
        </div>

        <div class="textarea">
          <span>备注：</span>
          <textarea
            name=""
            id=""
            name="notes"
            cols="30"
            rows="10"
            v-model="remark"
          ></textarea>
        </div>
        <p class="w100p tac f14">
          秋风起，蟹脚痒，菊花开，闻蟹来<br />
          吃螃蟹 秋天该有的美食态度
        </p>
      </div>

      <button @click="submit()">提 交</button>
      <p class="copyright">德龙农业版权所有</p>
      <van-calendar v-model="show" @confirm="onConfirm" />
    </div>
  </body>
  <script src="./js/vue@2.7.14.js"></script>
  <script src="./js/element-ui@2.15.14.js"></script>
  <script src="./js/axios@1.5.0.min.js"></script>
  <script src="./js/vant@2.12.54.min.js"></script>
  <script src="./js/request.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          options_1: [],
          options_2: [],
          options_3: [],
          value_1: "",
          value_2: "",
          value_3: "",
          detail: "",
          city_id: "",
          province_id: "",
          country_id: "",
          region_id: "",
          email: "",
          name: "",
          phone: "",
          remark: "",
          date:"",
          show: false,
          pid: 0,
        };
      },
      mounted() {
        this.fetchData();
		//判断订单情况
		const token = sessionStorage.getItem("token");
		const url = baseUrl + "/user.order/getInfo";
		if(!token){
			console.log(111);
			window.location.href = "login.html";
		}else{
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
              token:token
            },
          })
            .then((res) => {
              if (res.data.data.num > 0) {
            // this.placeAnOrderBtnShow = true;
            return
          }
              // 处理响应结果
              if (res.data.data.pay_status.value == 10) {
              // console.log(res.data.pay_status.value);
              window.location.href = "Information.html";
            } else if (res.data.data.pay_status.value == 20) {
              // console.log(res.data.pay_status.value);
              window.location.href = "inquire.html";
            }
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
		}
      },
      methods: {
        formatDate(date) {
          const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
        handleDateChange(val) {
      // 将日期选择器的值转换为 UTC 时间格式，并去除时间部分
      this.date = new Date(Date.parse(val)).toISOString().substr(0, 10);
    },
        //获取省份数据
        fetchData() {
          const url = baseUrl + "/settings/getRegionByPid";
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
              pid: this.pid,
            },
          })
            .then((res) => {
              // 处理响应结果
              this.options_1 = res.data.data;
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },

        select_1(id) {
          //省的id
          this.province_id = id;
          const url = baseUrl + "/settings/getRegionByPid";
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
              pid: id,
            },
          })
            .then((res) => {
              // 处理响应结果
              this.options_2 = res.data.data;
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },
        select_2(id) {
          //市的id
          this.city_id = id;
          const url = baseUrl + "/settings/getRegionByPid";
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
              pid: id,
            },
          })
            .then((res) => {
              // 处理响应结果
              this.options_3 = res.data.data;
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },
        select_3(id) {
          //县的id
          this.region_id = id;
        },
        getCheckedNodes() {},

        //提交
        submit: function () {
          if (!this.timer) {
            // 如果计时器不存在，则执行方法
            this.timer = setTimeout(() => {
              const url = baseUrl + "/user.address/add";
              const token = sessionStorage.getItem("token");
              // 中国大陆地区手机号码
              const phoneReg = /^1[3456789]\d{9}$/;
              if (this.name == "" || this.phone == "") {
                this.$message({
                  showClose: true,
                  message: "姓名和电话不能为空",
                  type: "warning",
                });
              } else if (!phoneReg.test(this.phone)) {
                this.$message({
                  showClose: true,
                  message: "电话号码格式不能对，请重新填写",
                  type: "warning",
                });
              } else if (
                this.province_id == "" ||
                this.city_id == "" ||
                this.region_id == ""
              ) {
                this.$message({
                  showClose: true,
                  message: "请选择对应的地区",
                  type: "warning",
                });
              } else if (this.detail == "") {
                this.$message({
                  showClose: true,
                  message: "详细地址不能为空不能为空",
                  type: "warning",
                });
              } else {
				this.shippingaddress();
              }
              this.timer = null; // 清空计时器
            }, 800); // 设置节流时间间隔
          }
        },
        //提交收货地址
        shippingaddress() {
          const url = baseUrl + "/user.address/add";
          const token = sessionStorage.getItem("token");
          axios({
            url: url,
            method: "post",
            data: {
              app_id: 10001,
              name: this.name,
              phone: this.phone,
              token: token,
              province_id: this.province_id,
              city_id: this.city_id,
              region_id: this.region_id,
              detail: this.detail,
              remark: this.remark,
              expect_time:this.date
            },
          })
            .then((res) => {
              // 处理响应结果
              console.log(res);
              if (res.data.code == 1) {
				this.audit();
              } else {
                this.$toast.fail("提交失败");
              }
            })
            .catch((error) => {
              // 处理错误

              console.error(error);
            });
        },
		//提交审核信息
		audit(){
			const url = baseUrl + "/order.order/buy";
          const token = sessionStorage.getItem("token");
          axios({
            url: url,
            method: "post",
            data: {
              app_id: 10001,
              token: token,
              remark: this.remark,
			  pay_type:20,
			  delivery:10,
			  is_use_points:false,
			  product_sku_id:0,
			  product_num:1,
			  product_id:1,
			  coupon_id:""
            },
          })
		  .then((res) => {
              // 处理响应结果
              console.log(res);
              if (res.data.code == 1) {
                this.$toast.success("提交成功");

                setTimeout(() => {
                  window.location.href = "Information.html";
                }, 500);
              } else {
                this.$toast.fail("提交失败");
              }
            })
            .catch((error) => {
              // 处理错误

              console.error(error);
            });
		}


      },
    });
    Vue.use(vant);
  </script>
</html>
